
import { useState } from 'react';
import '../App4.css'

function Calendar(props) {

    const { defaultValue } = props;

    const [date, setDate] = useState(defaultValue)

    const handlePrevMonth = () => {
        setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1))
    }
    const handleNextMonth = () => {
        setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1))
    }

    const daysOfMonth = (year, month) => {
        return new Date(year, month + 1, 0).getDate()
    }
    const firstDayOfMonth = (year, month) => {
        return new Date(year, month, 1).getDay()
    }


    const renderDates = () => {
        const days = []

        const daysCount = daysOfMonth(date.getFullYear(), date.getMonth())
        const firstDay = firstDayOfMonth(date.getFullYear(), date.getMonth())
        for (let i = 0; i < firstDay; i++) {
            days.push(<div key={`empty-${i}`} className="empty"></div>)
        }
        for (let i = 1; i <= daysCount; i++) {

            const clickHander=()=>{
                const curDate = new Date(date.getFullYear(),date.getDate());
                setDate(curDate);

            }
            if (i == date.getDate()) {
                days.push(<div key={i} className="day" selected onClick={()=>{clickHander()}}>{i}</div>)
            } else {
                days.push(<div key={i} className="day" onClick={()=>{clickHander()}}>{i}</div>)
            }
        }
        return days
    }

    return (
        <div className="calendar">
            <div className="header">
                <button onClick={handlePrevMonth}>&lt;</button>
                <div>{date.getFullYear()} 年 {date.getMonth() + 1} 月</div>
                <button onClick={handleNextMonth}>&gt;</button>
            </div>
            <div className="days">
                <div className="day">日</div>
                <div className="day">一</div>
                <div className="day">二</div>
                <div className="day">三</div>
                <div className="day">四</div>
                <div className="day">五</div>
                <div className="day">六</div>
                {renderDates()}
            </div>
        </div>
    )
}

export default Calendar